<template>
  <div class="admin_right_main">  
    <div
      class="search_template"
      style="background:white;height:120px;"
    >
      <div
        class="content"
        style="height: 80px; display: flex; justify-content: space-around;align-items: center;">
        <div>
          <span style="color:#888; font-weight:800;">新闻标题:</span>
          <el-input
            v-model="search"
            placeholder="请输入新闻标题"
            @keyup.enter.native="onEnterSearch"
            style="width:200px;height50px;"
          />
        </div>
        <div align="right">
          <el-button size="mini" icon="el-icon-search" type="success" @click="onEnterSearch">点击查询</el-button>
        </div>
      </div>
      <div align="left" style="margin-left:10px">
        <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="addEngineering">新增</el-button>
      </div>
    </div>
    <div class="table_template">
      <el-table
        ref="table"
        :data="tableData"
         border
        style="width: 100%"
        height="550"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width=""></el-table-column> -->
        <el-table-column align="center" prop="id" label="新闻Id" width=""></el-table-column>
        <el-table-column align="center" prop="title" label="新闻标题" width=""></el-table-column>
        <el-table-column align="center" prop="author" label="创建人" width=""></el-table-column>
        <!--  <el-table-column label="图片" width="">
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" width="100" height="80" alt="">
          </template>
        </el-table-column>-->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="auditEngineering(scope.row.id)">审核</el-button>
            <el-button size="mini" type="primary" plain @click="releaseEngineering(scope.row.id)">发布</el-button>
            <el-button
              size="mini"
              @click="editEngineering(scope.row.id)"
              class="table_header_btn"
               type="primary" plain
            >修改</el-button>
            <el-button
              size="mini"
              @click="deleteEngineering(scope.row.id)"
              type="danger"
              plain
              class="table_header_btn"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          style="width: 100%;position: relative;display: flex;justify-content: flex-end;padding: 0 20px;"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!--弹出框--新增-->
    <el-dialog
      columnName="新增信息"
      :visible.sync="dialogVisibleAdd"
      :destroy-on-close="true"
      width="90%"
    >
      <span>
        <FileAdd ref="FileAdd" @closeModal="closeAdd"></FileAdd>
      </span>
      <!-- 操作按钮 -->
      <div slot="footer">
        <el-button size="mini" type="info" class="table_header_btn" @click="saveAdd">保存</el-button>
        <el-button
          size="mini"
          type="info"
          class="table_header_btn"
          @click="dialogVisibleAdd = false"
        >关闭</el-button>
      </div>
    </el-dialog>
    <!--弹出框--修改-->
    <el-dialog
      columnName="修改信息"
      :visible.sync="dialogVisibleEdit"
      :destroy-on-close="true"
      width="90%"
    >
      <span>
        <FileModification
          ref="FileModification"
          :EngineeringData="multipleSelection"
          @closeModal="closeEdit"
        ></FileModification>
      </span>
      <div slot="footer">
        <el-button size="mini" type="info" class="table_header_btn" @click="saveEdit">保存</el-button>
        <el-button
          size="mini"
          type="info"
          class="table_header_btn"
          @click="dialogVisibleEdit = false"
        >关闭</el-button>
      </div>
    </el-dialog>
    <!--弹出框--审核-->
    <el-dialog title="审核信息" :visible.sync="dialogVisibleAudit" :destroy-on-close="true" width="90%">
      <span>
         <!-- :EngineeringData="multipleSelection" -->
        <auditIndex
          ref="auditIndex"
          
          :EngineeringData="multipleSelection"
          @closeModal="closeExamine"
        ></auditIndex>
      </span>
      <div slot="footer">
        <el-button size="mini" type="info" class="table_header_btn" @click="saveAudit">审核</el-button>
        <el-button size="mini" type="info" class="table_header_btn" @click="unsaveAudit">退回</el-button>
        <el-button
          size="mini"
          type="info"
          class="table_header_btn"
          @click="dialogVisibleAudit = false"
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import FileAdd from './add';
import { listNews, deleteNews, listNewsSearch ,AuditNews} from '@/api/user';
import FileModification from './cation';
import auditIndex from './auditIndex';
import { getToken, setToken, removeToken } from '@/utils/auth';
// 定义一个全局变量,存放table被选中的行索引
export default {
    components: {
        FileAdd,
        FileModification,
        auditIndex
    },
    computed: {},
    data() {
        return {
            tableOption: { isShowHeader: true, height: 'auto' },
            multipleSelection: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogVisibleAdd: false,
            dialogVisibleEdit: false,
            dialogVisibleAudit: false,
            form: {
                title: '', //新闻标题
                picUrl: '', //新闻详情
                author: '', //创建人
                id: '' //部门编号
            },
            editId: '',
            search: '',
            tableData: []
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            var listNews_data = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                token: getToken()
            };
            listNews(listNews_data)
                .then(response => {
                    if (response.data.code == 200) {
                        console.log('我需要的===', response);
                        this.tableData = response.data.data.list;
                        this.pageSize = response.data.data.pageSize;
                        this.pageNum = response.data.data.pageNum;
                        this.total = response.data.data.total;
                    } else {
                        // this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        },
        //添加的弹出框
        addEngineering() {
            this.dialogVisibleAdd = true;
        },
        //修改弹出框
        editEngineering(ind) {
            this.editId = ind;
            this.dialogVisibleEdit = true;
            setTimeout(() => {
                this.$refs.FileModification.modifyUser(ind);
            }, 10);
          
        },
        //审核弹出框
        auditEngineering(ind) {
            this.editId = ind;
          console.log("+++"+this.editId)
            this.dialogVisibleAudit = true;
            setTimeout(() => {
                this.$refs.auditIndex.modifyUser(ind);
            }, 10);
            // this.getTableData()
            // this.dialogVisibleAudit = true;
        },
        // 添加保存
        saveAdd() {
            // 调用子路由方法
            this.$refs.FileAdd.addSave();
        },
        closeAdd(val) {
            this.dialogVisibleAdd = val;
            this.getTableData();
        },
        // 修改保存
        saveEdit() {
            // 调用子路由方法
            this.$refs.FileModification.editSave();
        },
        closeEdit(val) {
            this.dialogVisibleEdit = val;
            this.getTableData();
        },
        	closeExamine(val){
            console.log("--博阳=-")
            this.dialogVisibleAudit=val
            this.getTableData()
          },
        // 审核保存
        saveAudit() {
            // 调用子路由方法
            // this.auditStatus = 1,
            this.$refs.auditIndex.Auditnews(1);

            // this.getTableData()
            // this.dialogVisibleAudit=false
        },
        unsaveAudit() {
            // 调用子路由方法
            this.$refs.auditIndex.Auditnews(3);
        },
        closeAudit(val) {
            this.dialogVisibleAudit = val;
            this.getTableData();
        },
        //点击发布
        releaseEngineering(ind) {
            var roleId = {
                id: ind,
                type: 2
            };
            console.log("-----"+ind)
            AuditNews(roleId)
                .then(response => {
                    console.log('我是修改需要的回显' +JSON.stringify(response));
                    if (response.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '发布成功!'
                        });
                        this.getTableData();
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // console.log("我是点击了取消")
                });
        },
        //勾选复选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //删除
        deleteEngineering(index) {
            this.$confirm('您确定要删除这条信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    var delner = {
                        id: index
                    };
                    // console.log('删除' + delner);
                    deleteNews(delner)
                        .then(response => {
                            if (response.data.code == 200) {
                                this.getTableData();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {
                            console.log('我是点击了取消');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getTableData();
        },
        onEnterSearch(e, searchVal) {
            /***********调用模糊查询接口***************/
            var new_add_params = {
                pageNum: 1,
                pageSize: 10,
                name: this.search //新闻标题搜索
            };
            console.log(this.search);
            listNewsSearch(new_add_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
            /*********调用模糊查询的接口**************/
        }
        /**********模糊查询搜索功能****************/
    },
    mounted: function() {
        this.getTableData();
    }
};
</script>
<style scoped>
</style>